<template>
<view class="container">
  <view class="page-body">
    <uni-forms ref="form" :modelValue="formData" label-position="left">
		<uni-forms-item label="头像" >
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			  <image class="avatar" :src="formData.avatarUrl" style="width: 150rpx; height: 150rpx;"></image>
			</button>
		</uni-forms-item>
		<uni-forms-item required name="nickName" label="昵称" >
			<uni-easyinput v-model="formData.nickName" type="nickname" placeholder="请输入昵称" />
		</uni-forms-item>
		<uni-forms-item required name="phoneno" label="手机号码">
			<uni-easyinput type="number" v-model="formData.phoneno" placeholder="请输入手机号" />
		</uni-forms-item>
		<uni-forms-item label="性别">
			<radio-group name="radio" @change="changeGender">
			  <label><radio value="0" :checked="formData.gender==0"/>男</label>
			  <label><radio value="1" :checked="formData.gender==1"/>女</label>
			  <label><radio value="2" :checked="formData.gender==2"/>保密</label>
			</radio-group>
		</uni-forms-item>
	</uni-forms>
    <!-- <form catchsubmit="formSubmit" catchreset="formReset">
      <view style="padding: 50rpx;">

          <view class="page-form-item">
            <view class="item-title">头像</view>
            <view>
                <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
                  <image class="avatar" :src="avatarUrl" style="width: 150rpx; height: 150rpx;"></image>
                </button>
            </view>
          </view>

          <view class="page-form-item">
            <view class="item-title">昵称</view>
            <view>
                <input type="nickname" v-model="nickName" class="weui-input" placeholder="请填写昵称"/>
            </view>
          </view>

          <view class="page-form-item">
            <view class="item-title">手机号码</view>
            <view>
                <input type="text" v-model="phoneno" class="weui-input" placeholder="请填写手机号"/>
            </view>
          </view>

          <view class="page-form-item">
            <view class="item-title">性别</view>
            <view>
                <radio-group name="radio" @change="changeGender">
                  <label><radio value="0" :checked="gender==0"/>男</label>
                  <label><radio value="1" :checked="gender==1"/>女</label>
                  <label><radio value="2" :checked="gender==2"/>保密</label>
                </radio-group>
            </view>
          </view>

      </view> -->

      <view class="btn-area">
        <button style="margin: 30rpx 0" type="primary" @click="submit">提交</button>
        <button style="margin: 30rpx 0" @click="cancel">取消</button>
      </view>
    <!-- </form> -->
  </view>

</view>
</template>

<script>
    import { wxUpdateUser } from "@/API/mine.js"

	export default {
		data() {
			return {
				rules: {
					nickName: {
						rules: [{
							required: true,
							errorMessage: '请填写昵称',
						}]
					},
					phoneno: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码',
						}]
					}
				},
				formData: {
					avatarUrl: "",
					nickName: "",
					gender: "0",
					phoneno: ""
				}
			}
		},
        onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
        onShow() {
            this.formData.avatarUrl = getApp().globalData.avatarUrl;
            this.formData.nickName = getApp().globalData.nickName;
            this.formData.gender = getApp().globalData.gender || 0;
            this.formData.phoneno = getApp().globalData.phoneno;
        },
        
		methods: {
            onChooseAvatar(e) {
                // 重新选择，需要报错base64
                const { avatarUrl } = e.detail;
                const avatarPath = avatarUrl;
                console.log(avatarPath);
                this.formData.avatarUrl = "data:image/jpeg;base64," + wx.getFileSystemManager().readFileSync(avatarPath, "base64");
            },
            
            changeGender(aa, bb) {
                this.formData.gender = (aa.detail || {}).value;
            },
			
			submit() {
				this.$refs.form.validate().then(res=>{
					this.submitPersonInfo()
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
            submitPersonInfo() {

                const form = {
                    nickName: this.formData.nickName,
                    avatarUrl: this.formData.avatarUrl,
                    gender: this.formData.gender,
                    phoneno: this.formData.phoneno
                };
                console.log(form);
                wxUpdateUser(form).then(res => {
                    console.log(res);

                    // 存储登录信息 
                    uni.setStorage({
                        key: 'user_login_key',
                        data: {
                            token: getApp().globalData.token,
                            avatarUrl: form.avatarUrl,
                            nickName: form.nickName,
                            phoneno: form.phoneno,
                            gender: form.gender,
                            userId: getApp().globalData.userId
                        }
                    });
                    
                    getApp().globalData.avatarUrl = form.avatarUrl;
                    getApp().globalData.nickName = form.nickName;
                    getApp().globalData.phoneno = form.phoneno;
                    getApp().globalData.gender = form.gender;
                    
                    this.cancel();
                })
            },
            cancel() {
                uni.$emit('changeUserInfo', {data: ''});

                uni.navigateBack();
            }
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,page {
		height: 100%;
        // padding: 0 50rpx;
	}
	.container {
		width: 100%;
		height: 100%;
        align-items: center;
		.page-body{
			padding: 50rpx;
		}
		
	}
    .page-form-item {
        display: flex;
        margin-bottom: 60rpx;
        align-items: center;
    }
    .item-title {
        margin-right: 40rpx;
        width: 150rpx;
        text-align: right;
        font-weight: 600;
    }
    .weui-input {
        background-color: white;
    }
    .avatar-wrapper {
        border: 0;
        padding: 0;
        width: 150rpx;
        height: 150rpx;
    }
    .btn-area {
    }
</style>
